<template>
	<view class="flex-col relative page" :style="{ 'padding-top': top + 'px' }" >
			<view  class=" h-46 flex   f-j-s"  style="flex-shrink:initial ;box-sizing:content-box	" >
				<view @click="back(1)" class="flex f-a-c f-s-0 padding-lr10 van-icon van-icon-arrow-left f20-size"></view>
			
			
			    <view class="flex f-a-c f-s-0 padding-lr10 f20-size">托运订单</view>
				<view class="flex   " >
				
					<!-- <text  @click="go('/pages/search/list?shopId='+id)" class="flex f-s-0 f-a-c padding-lr6 van-icon van-icon-search f20-size"></text> -->
					<!-- <view @tap.stop="toshare"  class="flex f-a-c f-j-c padding-lr5 van-icon van-icon-share-o f20-size"></view> -->
					<view @click="$refs.menuBtn.open()" class="flex f-s-0 f-a-c padding-lr10 van-icon van-icon-weapp-nav f20-size" style="position:relative">
						<text v-if="chatLen > 0"
								class="flex f-a-c f-j-c box-b f11-size t-color-w bg-color-r wrap-len b-radius padding-lr2 "
								style="font-size: 9px; min-width: 16px; height: 16px; position: absolute; top: 5%; left: 20%; white-space: nowrap;">{{chatLen}}</text>
					</view>
				</view>
			
				<!-- #ifdef MP-WEIXIN -->
					<xcx-header></xcx-header>
				<!-- #endif -->
		
				
			</view>
			
	
			<view >
						<no-data text="订单已被接单或者已取消"></no-data>
			</view>
		</view>
</template>

<script>

	import indexConfig from '@/config/index.config';
	import amapFile from '@/utils/amap-wx.130.js'
	import petData from '@/config/petData.config.js';
	const API = require('@/utils/api/tyOrder.js').default;
	const USERAPI = require('@/utils/api/user.js').default;
	const $ = require('@/utils/api.js');
	const state = require('@/utils/api/state.js').default;
		import logistics from '@/components/common/logistics.vue';
		import payItem from '@/components/common/payitem';
		
		import bingCountup from '@/components/bingCountup.vue';
		
	let self;
	export default {
		components: {logistics,payItem,bingCountup},
		props: {},
		computed: {
			i18n() {
				return this.$t('orderlist')
			},
		},
		data() {
			return {
				
			};
		},
		onLoad(options) {
			self = this;
			uni.setNavigationBarTitle({
				title:"订单详情"
			})
			
			  this.currentUrl = `${this.$mConfig.hostUrl}/pages/ys/order/detail?orderNo=${this.orderNo}&inviteCode=`+getApp().globalData.inviteCode;;

		},
	     onShow() {
			 	
			
		},
		onUnload() {
			clearInterval(this.timer1)
		},
		onHide() {
			clearInterval(this.timer1)
		},
		methods: {
			getChatLen() {
				const self= this;
				$.ajax({
					url: USERAPI.chatNumTargetIdApi,
					data: {targetMemberId:self.targetMemberId},
					isAuth: true,
					method: 'GET',
					success(res) {
						self.chatLen = res.data ? res.data : 0;
					}
				})
				// this.list.forEach((ele,index) => {
				// 	ele['text'] = self.i18n[ele.text];
				// })
			},
			 previewImage(index,imgUrls) {
						uni.previewImage({
							current: index, // 当前显示图片索引
							urls: imgUrls // 需要预览的图片http链接列表
	
						});
			},
			openbaojia(){
				// this.baojia();
				this.showprice = {
					price:true,
					price1:true,
					price2:true,
					price3:true,
					price4:true,
					price5:true,

				};
				this.showChaseDialog = true;
				console.log(this.showChaseDialog)

				this.currrentOrderNo = self.order.orderNo
					console.log(this.currrentOrderNo)
			},

			openbaojiaMy(){
				// this.baojia();

				this.showprice = {
					price:true,
					price1:true,
					price2:true,
					price3:true,
					price4:true,
					price5:true,

				};
				this.showChaseDialog = true;
				console.log(this.showChaseDialog)

				this.currrentOrderNo = self.order.orderNo
					console.log(this.currrentOrderNo)


					this.formData = {
						price:1,
						price1:2,
						price2:3,
						price3:4,
						price4:5,
						price5:6,

					};

			},


			close() {
				this.showChaseDialog = false
			},
			open() {
			    this.showChaseDialog = true
			},
			btnClick() {
				this.showChaseDialog = true
			},
			addQuote(){
				let self = this;
				console.log(this.currrentOrderNo)
				this.formData.orderNo = this.currrentOrderNo;
				
				if(  !this.formData.price &&
					 !this.formData.price1 && 
					 !this.formData.price2 && 
					 !this.formData.price3 && 
					 !this.formData.price4 && 
					 !this.formData.price5  
				
				){
									 $.$toast("请您先填写报价信息");	return
									 }
						
						
				$.ajax({
					url: API.addQuoteApi,
					data: this.formData,
					method: 'post',
					success(res) {


						uni.showToast({
						title: res.message,
						icon: 'none'
						})

						try {
						  let addQuoteList = uni.getStorageSync('addQuotelist');
						  if (!addQuoteList) {
							addQuoteList = [];
							addQuoteList.push(self.formData.orderNo)
							uni.setStorageSync('addQuotelist', addQuoteList);
						  }
						} catch (e) {
						  // 处理错误情况
						}
						
						
						
							self.order.hasQuote  = true
						setTimeout(() => {
							self.go('/pages/ys/order/chase');
							self.isflag = true
						}, 1000)
					}
				})
			},

			navToEvaluation(item, type) {
					uni.removeStorageSync('comment');
				this.$mRouter.push({
					route: `/pages/comment/comment?commontype=ty&detailId=`+item.id+`&add=`+type
				});

			},
				// 订单号复制
			copy(content) {
				/* #ifdef H5 */
				this.$mHelper.h5Copy(content);
				/* #endif */
				/* #ifndef H5 */
				uni.setClipboardData({
					data: content,
					success: function() {
						this.$mHelper.toast('复制成功');
					}
				});
				/* #endif */
			},

			// /**
			// 			 *
			// 			 * 剪切订单号
			// 			 */
			// 			// #ifndef H5
			// 			copy: function() {
			// 				let that = this;
			// 				uni.setClipboardData({
			// 					data: this.orderInfo.orderNo
			// 				});
			// 			},
			// 			// #endif

				      //查看内置地图
						goMap(item) {
							let that = this;
							//#ifdef H5
							if (that.$wechat.isWeixin() === true) {
								that.$wechat.seeLocation({
									latitude: parseFloat(this.merchantOrderVoList[this.activeIndex].latitude),
									longitude: parseFloat(this.merchantOrderVoList[this.activeIndex].longitude),
									name: item.merName,
									address: item.addressDetail ? item.addressDetail : '',
								}).then(res => {
									console.log('success');
								})
							} else {
								//#endif
								uni.openLocation({
									latitude: parseFloat(this.merchantOrderVoList[this.activeIndex].latitude),
									longitude: parseFloat(this.merchantOrderVoList[this.activeIndex].longitude),
									scale: 8,
									name: item.merName,
									address: item.addressDetail ? item.addressDetail : '',
									success: function(res) {
										that.go_map = true
									},
								});
								// #ifdef H5
							}
							//#endif
						},

							/**
							 * 打电话
							 */
							goTel: function() {
								uni.makePhoneCall({
									phoneNumber: this.orderInfo.deliveryId
								})
							},

							makePhone: function(e) {
								uni.makePhoneCall({
									phoneNumber: e
								})
							},
							/**
							 * 打开地图
							 *
							 */
							showMaoLocation: function(e) {
								if (!e.merLatitude || !e.merLongitude) return this.Tips({
									title: '缺少经纬度信息无法查看地图！'
								});
								//#ifdef H5
								if (this.$wechat.isWeixin() === true) {
									this.$wechat.seeLocation({
										latitude: parseFloat(e.merLatitude),
										longitude: parseFloat(e.merLongitude),
										name: e.merName,
										address: e.merAddressDetail,
									}).then(res => {
										console.log('success');
									})
								} else {
									//#endif
									uni.openLocation({
										latitude: parseFloat(e.merLatitude),
										longitude: parseFloat(e.merLongitude),
										scale: 8,
										name: e.merName,
										address: e.merAddressDetail,
										success: function() {

										},
									});
									// #ifdef H5
								}
								//#endif

							},
			showPay(index) {
				this.payIndex = index;
				// this.$refs.payitem.open();

				console.log(this.order)
				// let info = res.data;
				self.go('/pages/ys/order/pay?orderNo=' + this.order.payOrderNo + '&amount=' + this.order.payPrice);


			},
			pay(type) {
				$.ajax({
					url: API.payOrderApi,
					data: {
						payOrderNo: self.order.payOrderNo,
						payMethod: type
					},
					method: 'POST',
					success(res) {
						if (type != 'balance') {
							// #ifndef H5
							$.wxPay({
								payType: type.toLocaleLowerCase(),
								data: res.data.message,
								success(res) {
									self.order['status'] = 1;
								}
							})
							// #endif
							// #ifdef H5
							$.wxPayH5({
								data: res.data.message,
								success(res) {
									self.order['status'] = 1;
								}
							})
							// #endif
						}
						if (type == 'balance') {
							self.order['status'] = 1;
						}
					}
				})
			},
			showWuliu() {
				this.showmap = true
				// this.$refs.wuliuinfo.show(this.order.id);
			},
			sureOrder() {
				$.showModal({
					content: '是否确认收货?',
					success() {
				
						$.ajax({
							url: API.sureOrderApi,
							data: {
								orderId: self.order.id
							},
							method: 'POST',
							success(res) {
								$.$toast(self.i18n['操作成功']);
								self.order.status = 3;
							}
						})
					},
				},this)
				
			},
			cancelOrder() {
				$.showModal({
					content: '是否确认删除',
					success() {
						let info = self.order;
						$.ajax({
							url: API.cancelOrderApi,
							data: {
								orderId: info.id
							},
							method: 'POST',
							success(res) {
								$.$toast(self.i18n['操作成功']);
								self.order.status = 7;
							}
						})
					},
				},this)

			},
			
			starttransport() {
				$.showModal({
					content: '是否确认开始运输?',
					success() {
						let info = self.order;
						$.ajax({
							url: API.starttransportApi,
							data: {
								orderId: info.id
							},
							method: 'POST',
							success(res) {
								$.$toast(self.i18n['操作成功']);
								self.order.status = 3;
							}
						})
					},
				},this)

			},
			endtransport() {
				$.showModal({
					content: '是否确认送达?',
					success() {
						let info = self.order;
						$.ajax({
							url: API.endtransportApi,
							data: {
								orderId: info.id
							},
							method: 'POST',
							success(res) {
								$.$toast(self.i18n['操作成功']);
								self.order.status = 4;
							}
						})
					},
				},this)

			},
		
			changeAddress() {
				let info = self.order;
				self.go('/pages/user/address?id='+info.id+'&type=change');
			},
			refund(data) {
				//与评价共用一个缓存
				uni.setStorageSync('comment',data);
				self.go('/pages/ys/order/refund');
			},
		
			getUserInfo() {
						  console.log("getUserInfo","getUserInfo")
							this.getUser({
								success(res) {
									console.log("getUser res",res)
									uni.setStorageSync('userInfo',res);


									console.log("getUser res.isTansport",res.isTansport)
									console.log("getUser self.order",self.order)
									if(res.id==self.order.merMemberId){
										self.isMer = true
										self.targetMemberId =  self.order.memberId
									}else if(res.id==self.order.memberId){
										self.isAddMember = true
										self.targetMemberId =  self.order.merMemberId
									}else{
										self.targetMemberId =  self.order.merMemberId
									}
									
									
									
									console.log("self.isMer",self.isMer)
									
									if(self.isLogin){
											self.getChatLen()
									}

									console.log("self.order.memberId",self.order.memberId)
									console.log("self.order.merMemberId",self.order.merMemberId)
									console.log("res.isTansport",res.isTansport)

			if( self.order.memberId!=res.id  &&  !res.isTansport){
			
				uni.redirectTo({  url: '/pages/other/merchantApply'});
			}else if (self.order.memberId!=res.id   &&   self.order.merMemberId     &&    self.order.merMemberId!=res.id){
				
					uni.redirectTo({  url: '/pages/other/merchantApply'});
			}else if (self.order.memberId!=res.id   &&  !self.order.merMemberId     &&   !res.isTansport){
		
				uni.redirectTo({  url: '/pages/other/merchantApply'});
			}
				  

// } else{
// 	If( self.order.merMemberId     &&    self.order.merMemberId!=res.id ){
		
// 	}
	
// }

// if(self.order.memberId!=res.id   &&    ( !res.isTansport  &&  (self.order.merMemberId     &&    self.order.merMemberId!=res.id))  ){
	
	
	
// }
	
	 

									// if(!res.isTansport  && !(self.order.merMemberId  && !(self.order.memberId==res.id   ||   self.order.merMemberId==res.id )) ){
									// // if(!res.isTansport  ){
									// 			uni.redirectTo({  url: '/pages/other/merchantApply'});
									// }
									// uni.setStorageSync('userInfo',self.user);
								}
							})
						},
			getDetail(init) {
				console.log('init',init)
				$.ajax({
					url: API.orderDetailApi,
					data: {
						orderNo: self.orderNo
					},
					method: 'GET',
					success(res) {
					   self.order = res.data.order
				     
					   self.order.memberInfo = res.data.memberInfo
					   self.order.merMemberInfo = res.data.merMemberInfo
					   self.order.merLocation = res.data.merLocation
						
// console.log(self.order )
						var petType_arr = [];
						var petTypes=self.order.petType.split(",")
						for (let i = 0; i < petTypes.length; i++) {
								for (let j = 0; j < self.petcatArray.length; j++) {
										if(self.petcatArray[j].id==petTypes[i]){
												petType_arr.push(self.petcatArray[j].title)
												continue;
										}
								}
						}
						self.order.petType = petType_arr.join(",")


						var petTypes=self.order.petType.split(",")
						for (let i = 0; i < petTypes.length; i++) {
								for (let j = 0; j < self.petcatArray.length; j++) {
										if(self.petcatArray[j].id==petTypes[i]){
												petType_arr.push(self.petcatArray[j].title)
												continue;
										}
								}
						}
						self.order.petVolume = self.petVolumeArray[self.order.petVolume]
						self.order.cageSize = self.cageSizeArray[self.order.cageSize]
						// self.order.shuttle = self.shuttleArray[self.order.shuttle]
						// self.order.haulMethod = self.haulMethodArray[self.order.haulMethod]
						self.order.haulMethodConfirm = self.haulMethodArray[self.order.haulMethodConfirm]


						// self.order.addServiceMethod = self.addServiceMethodArray[self.order.shuttle]



						self.order.petPhoto=self.order.petPhoto.split(",")
						self.order.cagePhoto=self.order.cagePhoto.split(",")
						console.log("self.order.petPhoto111",self.order.petPhoto)
						console.log("self.order.cagePhoto",self.order.cagePhoto)
						console.log("self.order.petPhoto111 	order.petPhoto[0]",self.order.petPhoto[0])
												
							
													
						if (self.arr2.includes(res.data.order.status * 1)) {
							clearInterval(self.timer1)
						}


				
				if(res.data.order.status ==3 ||  res.data.order.status ==4){
					self.initmap(res.data.order)
				}
						

						if(init){
							                      
													self.getUserInfo()

													if(self.baojia  ){
													// if(self.baojia   && !self.order.hasQuote){
														self.openbaojia()
													}
							
													// if(self.order.finishExpiredTime) {//自动确认收货时间
													// 	self.autoGetGoods = Number(self.order.finishExpiredTime - res.now)/1000;
													// }
							
							
													// self.cancelTime = Number(res.upd_time+86400000 - res.now)/1000;
							
							
											// 		if(self.order.payEndTime) {//超过这个时间未支付订单取消
											// 			self.cancelTime = Number(self.order.payEndTime - res.now)/1000;
											// 		}
													
											// 		self.waitTime = Number(res.now-self.order.addTime)/1000;
											// 				console.log("self.waitTime111 ",self.waitTime )
											
												
											self.now = res.now;
											if(self.order.payEndTime) {//超过这个时间未支付订单取消
												self.cancelTime = Number(self.order.payEndTime - res.now)/1000;
											}
											
											self.waitTime = Number(res.now-self.order.addTime)/1000;
											   // self.waitTime  = self.waitTime+86400
											self.$nextTick(() => {
												
												if (self.arr2.includes(res.data.order.status * 1)) {
													self.pause();
													clearInterval(self.timer1)
													self.pause();
												}
												
											});
											self.getQuoteCount()
											if (self.arr1.includes(res.data.order.status * 1)) {
												self.timer1 = setInterval(() => {
													self.update(false)
												}, 30000)
											}
						}else{
							 // setInterval(self.timer1 )
						}

				

	  	
					}
				})
			},
		  //开始
		  start() {
		  	this.$refs.countUp.start();
		  },
		  // 暂停
		  pause() {
		  	this.$refs.countUp.pause();
		  },
		  // 重置
		  reset() {
		  	this.$refs.countUp.reset();
		  },
		  onChange(e) {
		  	this.timeData = e;
		  	//console.log(e);
		  },
			getQuoteCount() {
				$.ajax({
					url: API.getQuoteCountApi,
					data: {
						orderNo: self.orderNo
					},
					method: 'GET',
					success(res) {
						self.quoteCount = res.data
					}
				})
			},


			initmap(data) {
				    let _this = this

					this.info = data
					console.log("this.info ",this.info )
					// uni.setNavigationBarTitle({
					// 	title:this.info.status_text
					// })




					// let latitude =  35.86166;
					// let longitude = 104.195397;
					
		

					_this.currentlat = this.info.lat // 当前位置纬度
					_this.currentlng = this.info.lng // 当前位置经度
					
					
					if(this.$mConfig.dev){
						// 正式的时候注释掉
						_this.currentlat = 39.909
						_this.currentlng = 116.39742
					}
					
					
					_this.latitude = _this.currentlat
					_this.longitude = _this.currentlng
				
					

					// if(_this.currentlat && _this.currentlng){
					// 	// _this.showmap = true
					// }else{
					// 	//没有当前运输定位信息的时候
					// 	// 七点知道终点画一条线

					// }


					_this.latitude = _this.info.sendLat
					_this.longitude =_this.info.sendLng
					
					_this.covers = [
					// 	{
					// 	id: 1,
					// 	latitude: _this.latitude,
					// 	longitude: _this.longitude,
					// 	iconPath: 'https://qiniu.ccchongya.com/car.png',
					// 	title: '当前位置',
					// 	width: 25,
					// 	height: 25
					// }, 
					{
						id: 2,
						latitude: _this.info.sendLat,
						longitude: _this.info.sendLng,
						iconPath: 'https://qiniu.ccchongya.com/start.png',
						title: '起点位置',
						width: 40,
						height: 40
					},{
						id: 3,
						latitude: _this.info.receiveLat,
						longitude: _this.info.receiveLng,
						iconPath: 'https://qiniu.ccchongya.com/end.png',
						title: '终点位置',
						width: 40,
						height: 40
					}]


					_this.polyline = []
					_this.getLine()

			},
			update(type) {
				this.getDetail(type)
			},
			getLine() {
				var that = this;
				var key = indexConfig.amapApiKeyMpWeixin                                                                   ;
				var myAmapFun = new amapFile.AMapWX({
					key: key
				});
				// 1 还没接到人  所在地到起点，起点到终点
				let arr = ['0', '1', '5', '4']
				let end=[]

that.showmap = true
					// if(that.currentlat && that.currentlng){
					// 	that.showmap = true
					// 	this.lineData(myAmapFun, this.longitude + ',' + this.latitude, this.info.sendLng + ',' + this.info.sendLat,"#009966")
					// 	this.lineData(myAmapFun, this.info.sendLng + ',' + this.info.sendLat, this.info.receiveLng + ',' + this.info.receiveLat,"#009966")
					// }else{
						//没有当前运输定位信息的时候
						// 七点知道终点画一条线
						// this.lineData(myAmapFun, this.longitude + ',' + this.latitude, this.info.sendLng + ',' + this.info.sendLat,"#009966")
						this.lineData(myAmapFun, this.info.sendLng + ',' + this.info.sendLat, this.info.receiveLng + ',' + this.info.receiveLat,"#009966")
					// }


				// }
				// 2 途中  所在地到终点
				// if (this.info.status == 2) {
				// 	this.lineData(myAmapFun, this.info.start_longitude + ',' + this.info.start_latitude, this.longitude + ',' + this.latitude,
				// 		"#c6c6c5")
				// 	this.lineData(myAmapFun, this.longitude + ',' + this.latitude, end.split(',') ,
				// 		"#28d32e")
				// }
				// 3 完成、取消、待支付：起点到终点
				// let arr1 = ['-2', '-1', '3', '99']
				// if (arr1.includes(this.info.status)) {
				// 	this.lineData(myAmapFun, this.info.start_longitude + ',' + this.info.start_latitude, end.split(',') ,
				// 		"#28d32e")
				// }
			},
			lineData(myAmapFun, origin, destination, color) {
				let that = this
				myAmapFun.getDrivingRoute({
					origin,
					destination,
					success(data) {
						if (data.paths && data.paths[0] && data.paths[0].steps) {
							var steps = data.paths[0].steps;
							var points = [];
							for (var i = 0; i < steps.length; i++) {
								var poLen = steps[i].polyline.split(';');
								for (var j = 0; j < poLen.length; j++) {
									points.push({
										longitude: parseFloat(poLen[j].split(',')[0]),
										latitude: parseFloat(poLen[j].split(',')[1])
									})
								}
							}
						}
						that.polyline.push({
							points: points,
							color,
							width: 5,
							arrowLine: true,
						})
					},
					fail(info) {
					}
				});
			},
			toNav(status) {
				// if (status == 2) {
				// 	plus.runtime.openURL("androidamap://navi?sourceApplication=ddcar&lat=" + this.info.end_latitude + "&lon=" + this.info
				// 		.end_longitude + "&dev=0&style=2")
				// } else {
					// plus.runtime.openURL("androidamap://navi?sourceApplication=appname&lat=" + this.info.shaddress[this.info.shaddress.length-1].end_latitude + "&lon=" +
						// this.info.shaddress[this.info.shaddress.length-1].end_longitude + "&dev=0&style=2")
				// }
				let _this = this;
				uni.getSystemInfo({
					success(res) {
						console.log(res.platform);
						if(res.platform=='android'){
							plus.runtime.openURL("androidamap://navi?sourceApplication=appname&lat=" + _this.info.receiveLat + "&lon=" +
								_this.info.receiveLng + "&dev=0&style=2")
						}else if(res.platform=='ios'){
							plus.runtime.openURL("iosamap://navi?sourceApplication=appname&lat=" + _this.info.receiveLat, + "&lon=" +
								_this.info.receiveLng + "&dev=0&style=2")
						}
					}
				})
			},
			toAnquan() {
				uni.navigateTo({
					url: '/pages/ys/security'
				})
			},


		},
	};
</script>

<style>
	.u-popup{
		flex:0
	}
	.addressBox {
		background-color: #ffffff;
		padding: 40rpx 0 ;
		margin-top:-1px
	}

	.addressBoxDetail {
		padding: 0 4rpx;
	}

	.space-x-14>view:not(:first-child),
	.space-x-14>text:not(:first-child),
	.space-x-14>image:not(:first-child) {
		margin-left: 28rpx;
	}

	.addressBox .text-wrapper_2 {
		padding: 8rpx 0;
		background-color: #4578ff;
		border-radius: 50%;
		width: 41rpx;
		height: 41rpx;
	}

	.icontext {
		font-size: 28rpx;
		font-family: HarmonyOSSansSC;
		line-height: 26rpx;
		color: #ffffff;
	}

	.space-y-12>view:not(:first-child),
	.space-y-12>text:not(:first-child),
	.space-y-12>image:not(:first-child) {
		margin-top: 24rpx;
	}

	.space-x-6>view:not(:first-child),
	.space-x-6>text:not(:first-child),
	.space-x-6>image:not(:first-child) {
		margin-left: 12rpx;
	}

	.contenttext {
		font-size: 24rpx;
		font-family: HarmonyOSSansSC;
		line-height: 22rpx;
		color: #666e7a;
	}

	.addressBox .view {
		margin-top: 40rpx;
	}

	.addressBox .text-wrapper_3 {
		padding: 8rpx 0;
		background-color: #43cf7c;
		border-radius: 50%;
		width: 41rpx;
		height: 41rpx;
	}

	.addresstext {
		color: #081329;
		font-size: 32rpx;
		font-family: HarmonyOSSansSC;
		line-height: 30rpx;
	}
</style>



<style scoped lang="css">


	.page {
		background-color: #f4f4f4;
		width: 100%;
		overflow-y: auto;
		overflow-x: hidden;
		height: 100%;
	}

	.space-x-6>view:not(:first-child),
	.space-x-6>text:not(:first-child),
	.space-x-6>image:not(:first-child) {
		margin-left: 12rpx;
	}

	.font_1 {
		font-size: 28rpx;
		/* line-height: 26rpx; */
		color: #000000;
		font-weight: 700;
	}

	.font_2 {
		font-size: 24rpx;
		line-height: 22rpx;
		color: #666e7a;
	}

	.group_2 {
		padding: 12rpx 12rpx 96rpx;
		/* overflow-y: auto; */
	}

	.text_2 {
		margin-left: 4rpx;
	}

	.text_3 {
		margin-left: 4rpx;
		margin-top: 48rpx;
	}

	.group_3 {
		margin-left: 4rpx;
		margin-top: 48rpx;
		line-height: 22rpx;
	}

	.font_3 {
		font-size: 24rpx;
		line-height: 72rpx;
		color: #666e7a;
	}

	.text_4 {
		color: #ff5733;
		line-height: 18rpx;
	}

	.text_5 {
		margin-left: 4rpx;
		margin-top: 44rpx;
		font-weight: 700;
	}

	.font_4 {
		font-size: 24rpx;
		line-height: 22rpx;
		color: #000000;
	}
	.font_14 {
		font-size: 28rpx;
		/* line-height: 22rpx; */
		color: #ffffff;
	}
	.text_6 {
		margin-left: 4rpx;
		margin-top: 24rpx;
		font-weight: 700;
	}

	.group_4 {
		margin-top: 24rpx;
		padding: 0 4rpx;
	}

	.space-y-12>view:not(:first-child),
	.space-y-12>text:not(:first-child),
	.space-y-12>image:not(:first-child) {
		margin-top: 24rpx;
	}

	.text_7 {
		margin-left: 4rpx;
		margin-top: 60rpx;
		font-weight: 700;
	}


	.text_8 {
		margin-right: 8rpx;
	}

	.text_9 {
		margin-right: 8rpx;
	}

	.text_10 {
		margin-right: 8rpx;
	}

	.text_11 {
		margin-right: 8rpx;
	}

	.text_12 {
		margin-right: 8rpx;
	}

	.text_13 {
		margin-right: 8rpx;
	}

	.text_14 {
		margin-right: 8rpx;
	}

	.text_15 {
		margin-right: 8rpx;
	}

	.text_16 {
		margin-right: 8rpx;
	}

	.text_17 {
		margin-right: 12rpx;
	}

	.group_5 {
		margin-top: 10rpx;
		padding: 0 2rpx;
	}

	.group_6 {
		margin-top: 40rpx;
	}

	.image_4 {
		border-radius: 384rpx;
		width: 100rpx;
		height: 100rpx;
	}

	.group_7 {
		margin-left: 16rpx;
	}

	.font_5 {
		font-size: 24rpx;
		line-height: 42rpx;
		color: #666e7a;
	}

	.text_18 {
		margin-top: 12rpx;
	}

	.image_5 {
		width: 68rpx;
		height: 68rpx;
	}

	.image_6 {
		margin-right: 38rpx;
	}

	.text_19 {
		margin-top: 24rpx;
		font-weight: 700;
	}

	.group_8 {
		margin-top: 44rpx;
	}

	.space-x-8>view:not(:first-child),
	.space-x-8>text:not(:first-child),
	.space-x-8>image:not(:first-child) {
		margin-left: 16rpx;
	}

	.image_7 {
		border-radius: 376rpx;
		width: 100rpx;
		height: 100rpx;
	}

	.image_8 {
		margin-right: 42rpx;
	}

	.group_9 {
		margin-top: 40rpx;
		/* padding: 0 40rpx; */
	}

	.space-x-14>view:not(:first-child),
	.space-x-14>text:not(:first-child),
	.space-x-14>image:not(:first-child) {
		margin-left: 28rpx;
	}

	.text-wrapper {
		flex: 1 1 188rpx;
		padding: 15rpx;
		background-color: #ffbd52;
		border-radius: 20rpx;
		/* height: 82rpx; */
	}

	.group_10 {
		margin-top: 52rpx;
	}

	.space-x-10>view:not(:first-child),
	.space-x-10>text:not(:first-child),
	.space-x-10>image:not(:first-child) {
		margin-left: 20rpx;
	}

	.image_9 {
		width: 32rpx;
		height: 32rpx;
	}

	.text_20 {
		color: #0454f9;
	}
</style>

<style>

.detail_font_1 {
  font-size: 26rpx;
  /* font-family: SourceHanSansCN; */
  /* line-height: 22rpx; */
  color: #666e7a;
}
.section {
  padding: 22rpx 12rpx 22rpx 22rpx;
  background-color: #ffffff;
  border-radius: 20rpx;
  filter: drop-shadow(0px 0px 8rpx #ffbd5208);
  overflow: hidden;
}
.detail_space-x-6 > view:not(:first-child),
.detail_space-x-6 > text:not(:first-child),
.detail_space-x-6 > image:not(:first-child) {
  margin-left: 12rpx;
}
/* .text-wrapper {
  padding: 12rpx 0;
  background-color: #4578ff;
  border-radius: 6rpx;
  width: 88rpx;
  height: 44rpx;
} */
.detail_text_5 {
  color: #ffffff;
}
.detail_font_4 {
  font-size: 24rpx;
  line-height: 22rpx;
  color: #081329;
}
.detail_text_6 {
  line-height: 23rpx;
}
.detail_image_5 {
  width: 56rpx;
  height: 16rpx;
}
.detail_text_7 {
  line-height: 23rpx;
}
.detail_text_8 {
  color: #081329;
  font-size: 20rpx;
  line-height: 20rpx;
}
.detail_group_3 {
  margin-top: 42rpx;
}
.detail_image_6 {
  border-radius: 296rpx;
  width: 120rpx;
  height: 120rpx;
}
.detail_space-y-16 > view:not(:first-child),
.detail_space-y-16 > text:not(:first-child),
.detail_space-y-16 > image:not(:first-child) {
  margin-top: 10rpx;
}
.detail_group_4 {
  padding-left: 46rpx;
}
.detail_space-x-10 > view:not(:first-child),
.detail_space-x-10 > text:not(:first-child),
.detail_space-x-10 > image:not(:first-child) {
  margin-left: 20rpx;
}




.equal-division {margin-top: 28rpx;width:100%}
.equal-division-item {
	/* padding: 56rpx 0; */
	/* background-color: #0000000a; */
	border-radius: 20rpx;
	height: 208rpx;
	overflow: hidden;
}
.image_11 {height: 208rpx;}
.section_9 {flex: 1;margin-left: 8rpx;}
.space-y-26>view:not(:first-child),
.space-y-26>text:not(:first-child),
.space-y-26>image:not(:first-child) {margin-top: 52rpx;}




</style>

<style lang="scss" scoped>
	.navigation {
		position: fixed;
		right: 10rpx;
		top: 100rpx;
		width: 100rpx;
		height: 100rpx;
	}


	.btn-box {
		display: flex;
		justify-content: flex-end;
		align-items: center;
		margin: 10px 0;
	}
	.action-btn{
	    font-size: 12px;
	    margin: 0 0 0 7px;
	    padding: 0 14px;
	    color: #606266;
	    text-align: center;
	    height: 26px;
	    border-radius: 16px;
	    line-height: 26px;
	    border: 0.5px solid rgba(0, 0, 0, 0.15);
	}


























.section_3 {
		margin: 0 20rpx;
		padding: 0 6rpx 16rpx;
		background-color: #ffffff;
		border-radius: 10rpx;
		overflow: hidden;
	}

	.space-y-12>view:not(:first-child),
	.space-y-12>text:not(:first-child),
	.space-y-12>image:not(:first-child) {
		margin-top: 24rpx;
	}

	.text_10 {
		margin-left: 28rpx;
		color: #000000;
		font-size: 36rpx;
		font-weight: 700;
		line-height: 34rpx;
	}

	.section_4 {
		margin-right: 10rpx;
		padding: 22rpx 0 30rpx 20rpx;
		background-color: #ffffff;
		border-radius: 20rpx;
		filter: drop-shadow(0px 0px 8rpx #ffbd5208);
		overflow: hidden;
	}

	.space-y-23>view:not(:first-child),
	.space-y-23>text:not(:first-child),
	.space-y-23>image:not(:first-child) {
		margin-top: 46rpx;
	}

	.text_11 {
		line-height: 23rpx;
	}

	.text_12 {
		line-height: 23rpx;
	}

	.text_13 {
		margin-right: -8rpx;
		line-height: 20rpx;
	}

	.view {
		margin: 0 8rpx;
	}

	.space-x-10>view:not(:first-child),
	.space-x-10>text:not(:first-child),
	.space-x-10>image:not(:first-child) {
		margin-left: 20rpx;
	}

	.space-y-10>view:not(:first-child),
	.space-y-10>text:not(:first-child),
	.space-y-10>image:not(:first-child) {
		margin-top: 20rpx;
	}

	.text_14 {
		font-size: 22rpx;
		line-height: 20rpx;
	}

	.text_15 {
		margin-right: 92rpx;
		font-size: 22rpx;
		line-height: 20rpx;
	}

	.text_16 {
		font-size: 22rpx;
		line-height: 20rpx;
	}

	.text_17 {
		font-size: 22rpx;
		line-height: 20rpx;
	}

	.text_18 {
		font-size: 22rpx;
		line-height: 20rpx;
	}

	.text_19 {
		margin-right: 28rpx;
		font-size: 22rpx;
		line-height: 20rpx;
	}

	.text-wrapper_3 {
		margin-left: 4rpx;
		padding: 16rpx 0 20rpx;
		background-color: #ebebeb00;
		border-radius: 10rpx;
		overflow: hidden;
		width: 670rpx;
		height: 120rpx;
	}

	.text_20 {
		margin-left: 24rpx;

		width: 582rpx;
	}

	.group_4 {
		padding-top: 24rpx;
	}

	.section_6 {
		padding: 24rpx 28rpx;
		background-color: #f0edd542;
		border-radius: 394rpx;
	}

	.font_7 {
		font-size: 24rpx;
		font-family: HarmonyOSSansSC;
		line-height: 22rpx;
		color: #081329;
	}

	.text_21 {
		font-size: 22rpx;
		line-height: 21rpx;
	}

	.text_22 {
		font-size: 22rpx;
		line-height: 19rpx;
	}

	.text-wrapper_4 {
		margin-top: 8rpx;
		padding: 24rpx 0;
		background-color: #f0edd542;
		border-radius: 60rpx;
	}

	.text_23 {
		margin-left: 28rpx;
		font-size: 22rpx;
		line-height: 60rpx;
	}

	.text-wrapper_5 {
		margin-top: 20rpx;
		padding: 10rpx 0;
		background-color: #ffd701;
		border-radius: 386rpx;
		width: 260rpx;
	}
	.bj-price{
		display: inline-block;
		width: 300rpx;
	}
	.bj-desc{
		padding: 24rpx 28rpx;
		background-color: #f0edd542;
		display: inline-block;
		width: 500rpx;
		height:160rpx;
	}
	/deep/ text {  flex-shrink:0 ;	}


</style>
